<template>
  <view w-full box-border pa-20rpx grid grid-cols-2 gap-20rpx>
    <view
      v-for="(item, index) in topicList"
      :key="index"
      w-345rpx
      h-300rpx
      rounded-20rpx
      box-border
      pa-40rpx
      flex
      flex-col
      justify-between
      :style="{ backgroundColor: item.bg }"
      @click="toExer(item)">
      <image w-100rpx h-100rpx :src="'/pages/exam/static/topic/' + item.img + '.png'"></image>
      <view flex justify-between items-end>
        <view flex flex-col>
          <text text-32rpx font-bold mb-6rpx>{{ item.title }}</text>
          <text text-24rpx text="#7D7D7D">开始{{ type === 1 ? '练习' : '考试' }}</text>
        </view>
        <image w-40rpx h-40rpx :src="'/pages/exam/static/topic/' + item.img2 + '.png'"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { selectExerTopicList } from '@/api/examStudy'
const type = ref(1)
const topicList = ref<any>([])
const actions = ref<any>([
  { title: '居家安全', bg: '#DDF1FF', img: 'icon1', img2: 'icon_r1' },
  { title: '社会安全', bg: '#FEFAC7', img: 'icon2', img2: 'icon_r2' },
  { title: '交通安全', bg: '#DBF6FF', img: 'icon3', img2: 'icon_r3' },
  { title: '消防安全', bg: '#FFE2DE', img: 'icon4', img2: 'icon_r4' },
  { title: '自然灾害', bg: '#EBF9C2', img: 'icon5', img2: 'icon_r5' },
  { title: '生产安全', bg: '#FFEBDA', img: 'icon6', img2: 'icon_r6' },
  { title: '应急救护', bg: '#FFE4EE', img: 'icon7', img2: 'icon_r7' }
])

async function getActionsList() {
  // 模拟接口返回的数据
  const response = await selectExerTopicList()
  const res = response.data.result.map((item: any) => {
    return {
      title: item.name,
      id: item.id,
      img: item.background
    }
  })
  // const res = [
  //   { title: '居家安全', id: 1 },
  //   { title: '社会安全', id: 2 },
  //   { title: '交通安全', id: 3 },
  //   { title: '消防安全', id: 4 },
  //   { title: '自然灾害', id: 5 },
  //   { title: '生产安全', id: 6 },
  //   { title: '应急救护', id: 7 },
  //   { title: '不包含', id: 8 }
  // ]

  const result = res.map((item: any) => {
    const obj = actions.value.find((i: any) => i.title === item.title)
    return obj
      ? { ...obj, id: item.id }
      : {
          title: item.title,
          id: item.id,
          bg: '#DDF1FF',
          img: 'icon1',
          img2: 'icon_r1'
        }
  })
  topicList.value = result
}

function toExer(item: any) {
  uni.navigateTo({
    url: `/pages/exam/topicList?title=${item.title}&topicId=${item.id}&type=${type.value}`
  })
}

onMounted(() => {})
onLoad((options: any) => {
  if (options.type) {
    type.value = parseInt(options.type)
  }
  uni.setNavigationBarTitle({
    title: type.value === 1 ? '专题练习' : '专题考试'
  })
  getActionsList()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
